<!DOCTYPE html>
<html>
<head>
  <title>Animation Sprite</title>
  <script src="../../kontra.js"></script>
</head>
<body>
  <canvas id="game" width="600" height="400" style="background: #333331"></canvas>
  <script id="code">
    // initialize the game and setup the canvas
    let { canvas, context } = kontra.init();

    // set image path so we don't have to reference the sprite sheet by it's path
    kontra.setImagePath('../imgs/');

    // load the sprite sheet
    kontra.load('character_walk_sheet.png').then(function() {

      // create the sprite sheet and its animation
      window.spriteSheet = kontra.SpriteSheet({
        image: kontra.imageAssets.character_walk_sheet,
        frameWidth: 72,
        frameHeight: 97,
        animations: {
          walk: {
            frames: '0..10',  // frames 0 through 10
            frameRate: 30
          }
        }
      });

      // pass the animations to the sprite
      window.sprite = kontra.Sprite({
        width: 72 * 2,
        height: 97 * 2,
        anchor: {
          x: 0.5,
          y: 0.5,
        },
        x: 300,
        y: 200,
        animations: spriteSheet.animations
      });

      // set the animation to play
      sprite.playAnimation('walk');

      // create the game loop to update and render the sprite
      window.loop = kontra.GameLoop({
        update: function() {
          sprite.update();
        },
        render: function() {
          sprite.render();
        }
      });

      // start the loop
      loop.start();
    });
  </script>
  <script src="../prism/codeOutput.js"></script>
</body>
</html>